<template>
	<div class="activityList">
		<div @click='gotoInfo(item.activityCode)' class="activeItem" v-for="(item,i) in activityList" :key='i'>
			<img @click="images = [item.activityPosterUrls[0]];show=true" :src="item.activityPosterUrls[0]" />
			<div class="activeTitle">
				{{item.activityTitle}}
			</div>
			<div class="effectiveTime">
				活动截止时间:{{$moment(item.effectiveTime).format('YYYY年MM月DD日 HH:mm:ss')}}
			</div>
		</div>
		<!-- <van-cell @click='gotoInfo(item.activityCode)' :center='true' value="详情" is-link v-for="(item,i) in activityList" :key='i'>
			<template #title>
				<div class="celltitle">
					<img @click="images = [item.activityPosterUrl];show=true" :src="item.activityPosterUrl" />
					<div class="activeInfo">
						<div class="activeTitle">
							{{item.activityTitle}}
						</div>
						<div class="effectiveTime">
							活动截止时间:{{$moment(item.effectiveTime).format('YYYY年MM月DD日 HH:mm:ss')}}
						</div>
					</div>
				</div>
			</template>
		</van-cell>
		<van-image-preview v-model="show" :images="images">
		</van-image-preview> -->
	</div>
</template>


<script>
	const serviceAPI = require('@/serviceAPI.js')
	export default {
		data() {
			return {
				show: false,
				images: [],
				activityList: []
			}
		},
		async created() {
			await this.getActivityList()
		},
		methods: {
			async getActivityList() {
				const res = await this.$axios.get(serviceAPI.getActivityList)
				if (res.data.code === 10000) {
					this.activityList = res.data.data
				}
			},
			gotoInfo(activityCode) {
				this.$router.push({
					name: 'activityInfo',
					params: {
						activityCode
					}
				})
			}
		}
	}
</script>

<style scoped>
	.activityList {
		padding: 10px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		height: 100vh;
		background: whitesmoke;
	}

	.activeItem {
		background-color: white;
		width: 41vw;
		height: 200px;
		padding: 9px;
		-moz-box-shadow:0px 1px 5px #A6A6A6; -webkit-box-shadow:0px 1px 5px #A6A6A6; box-shadow:0px 1px 5px #A6A6A6;
	}

	.celltitle {
		display: flex;
	}

	img {
		width: 41vw !important;
		height: 140px !important;
		object-fit: cover;
		margin-right: 0.9375rem;
		border-radius: 10px;
	}

	.activeInfo {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.activeTitle {
		font-size: 14px;
		font-weight: 500;
		color: #333;
	}

	.effectiveTime {
		color: #858585;
		font-size: 13px;
	}

	.van-cell__title {
		flex: 8;
	}

	.van-cell__value {
		flex: 2;
	}
</style>
